// 入口文件

// 这两个导入的时候必须这样写
import React from 'react' // 创建组件，虚拟dom, 生命周期
import ReactDOM from 'react-dom'  // 把创建好的组件和虚拟dom放在页面上显示

// 创建虚拟的dom 
/* <h1 id="myh1"> 哈哈哈</h1>  */
// const mydiv = React.createElement('h1', { id: 'myh1', title: 'ABCsd' }, '哈哈哈')

// 可以使用babel来张这些 js 中的标签 jsx
// 注意：jsx语言的本质，还是在运行的时候转换为 React.createElement
// const mydiv = <div id="mydiv">哈哈哈</div>

let a = 10
let str = 'sdf;a'
let arr = [234, 134, 'asdf', 'asdfasd', 'asdf']

// 组件
// function Hello(props) {
//   return <div>{props.name}--{props.age}</div>
// }

// import Hello from './components/Hello.jsx'  //必须写后缀名

// 要不写后缀名， 需要配置 webpack.config.js
// resolve: {
//   extensions: ['.js', '.jsx', 'json'] /** 表示这几个文件的后缀名可以不用谢 */
// }

// 配置 @ 
/** 在 webpack.config.js 的 resolve 里配置 */
// alias: {
//   '@': path.join(__dirname, './src') /** 这样，@ 就表示项目根目录中的 src 目录 */
// }

import Hello from '@/components/Hello'
import World from '@/components/World'
let dog = {
  name: '大黄',
  age: 3
}


ReactDOM.render(
  <div>
    {a + 2}
    <hr />
    {str}
    <hr />
    {arr.map((item, i) => <div key={i}>{item}</div>)}

    <hr />
    <div>
      组件
      <Hello name={dog.name} age={dog.age}></Hello>
      <World title="how a you" name="jack"></World>
    </div>
  </div>,
  document.getElementById('app'))


// #region 折叠代码演示
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// 啊飒飒
// #endregion